import React, { Component } from 'react'
// import './Child2.css'
import classNames from 'classnames'

import styles from './Child2.module.css'

console.log('---Child2---', styles)

export default class Child2 extends Component {
  state = {
    isShow: false
  }

  render () {
    return (
      <div>
        {/* <p className='test'>Child2</p> */}
        {/* <p className={styles['test']}>Child2</p> */}

        {/* 多个class进行渲染的时候 */}
        {/* <p className={classNames(styles.test, styles['my-test'])}>Child2</p> */}

        <p
          className={classNames(styles.test, {
            // [styles['my-test']]: this.state.isShow

            [styles.other]: this.state.isShow
          })}
        >
          Child2
        </p>

        <p>
          <button onClick={() => this.setState({ isShow: !this.state.isShow })}>
            toggle
          </button>
        </p>
      </div>
    )
  }
}
